.xButton
  margin 5px
  box-sizing border-box /*mobile border以内的设置都是width height  传统只是内容的*/
  display inline-block
  padding 6px 1em
  border-radius 4px
  color #ffffff
  font-family inherit
  background-color #000
  text-align center
  cursor pointer
  user-select none
  &.primary
    background-color #0099ff
  &.warning
    background-color #F90
  &.circle
    border-radius 1.5em
  &.block
    display block

.ripple
  position relative
  &::after
    content ""
    display block
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    pointer-events none
    background-image radial-gradient(circle, #fff 10%, transparent 11%);
    background-position 50%
    background-repeat no-repeat
    transform scale(12)
    transition transform .6s, opacity .6s
    opacity 0
  &:active::after
    opacity .3
    transform scale(0)
    transition 0s


